<template>
    <div>
        <el-dialog title="平面图标记" :visible.sync="dialogVisible" width="100%" :before-close="closeDialog"
            :close-on-click-modal="false">
            <!-- @mousewheel.prevent="rollImg" -->
            <div class="caritem">
                <div class="caritem_div">
                    <div class="div_box" :style="{ transform: `scale(${scale}) `, left: `${x}px`, top: `${y}px` }"
                        @wheel="handleWheel" @mousedown.stop="handleMouseDown" @mousemove="handleMouseMove"
                        @mouseup="handleMouseUp">
                        <img class="elImage" :src="image" @click="setPoint" ref="imgDiv" @mousedown.prevent />
                        <i class="icon" :class="iconclass()" v-if="flag" @mousedown.stop="handleMouseDown2($event)"
                            @mousedown.prevent :style="'top:' + top + 'px;' + 'left:' + left + 'px;'"></i>
                    </div>
                </div>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeDialog" class="cancel-button">取 消</el-button>
                <el-button size="small" @click="submit" class="confirm-button">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { reqUpdateMark } from "@api/api.js";
import { mapState } from "vuex";
import loadMore from "@mixin/loadMore";

export default {
    mixins: [loadMore],
    props: ['editInfo'],
    data() {
        return {
            dialogVisible: false,
            left: 0,
            top: 0,
            img: require("@assets/images/account_bg.png"),
            flag: false,
            image: '',

            // 放大缩小
            scale: 1, // 初始缩放比例为1
            scaleStep: 0.1, // 每次滚动缩放的步长

            // 鼠标拖动
            x: 0, // div的初始x坐标
            y: 0, // div的初始y坐标
            dragging: false, // 是否正在拖动
            startX: 0, // 鼠标按下时的x坐标
            startY: 0, // 鼠标按下时的y坐标

            dragging2: false, // 是否正在拖动
            startX2: 0, // 鼠标按下时的x坐标
            startY2: 0, // 鼠标按下时的y坐标
        };
    },
    watch: {
        // dialogVisible(e){
        //     console.log(this.editInfo,'editInfo');
        // }
    },
    computed: {
        ...mapState(["user"]),
    },
    mounted() {
    },
    methods: {
        // 鼠标拖拽移动事件
        handleMouseDown2(event) {
            this.dragging2 = true;
            // 拖拽时考虑当前的缩放比例，并将鼠标的坐标转换为缩放后的坐标。
            this.startX2 = (event.clientX - this.x - this.left * this.scale) / this.scale;
            this.startY2 = (event.clientY - this.y - this.top * this.scale) / this.scale;
            // 将 mousemove 和 mouseup 事件绑定到 document 可解决鼠标移动太快导致拖拽断掉的问题
            document.addEventListener('mousemove', this.handleMouseMove2);
            document.addEventListener('mouseup', this.handleMouseUp2);
        },

        handleMouseMove2(event) {
            if (!this.dragging2) return;
            const newLeft = (event.clientX - this.x - this.startX2 * this.scale) / this.scale;
            const newTop = (event.clientY - this.y - this.startY2 * this.scale) / this.scale;
            this.left = Math.round(newLeft);
            this.top = Math.round(newTop);
        },

        handleMouseUp2() {
            this.dragging2 = false;
            // 移除 document 上的事件监听
            document.removeEventListener('mousemove', this.handleMouseMove2);
            document.removeEventListener('mouseup', this.handleMouseUp2);
        },
        // 标记点图片
        iconclass() {
            let pic = 'iconfont shebeiguanli2'
            if (this.editInfo) {
                if (this.editInfo.productName == '门磁') {
                    pic = 'iconfont menci'
                } else if (this.editInfo.productName == '烟感探测报警器') {
                    pic = 'iconfont yangan'
                } else if (this.editInfo.productName == '红外探测器') {
                    pic = 'iconfont rentihongwai'
                } else if (this.editInfo.productName == '智能燃气报警器') {
                    pic = 'iconfont reshuiqi'
                }
            }
            return pic
        },
        // 鼠标拖动
        handleMouseDown(event) {
            this.dragging = true;
            this.startX = event.clientX - this.x;
            this.startY = event.clientY - this.y;
        },
        handleMouseMove(event) {
            if (!this.dragging) return;
            this.x = event.clientX - this.startX;
            this.y = event.clientY - this.startY;
        },
        handleMouseUp() {
            this.dragging = false;
        },
        // 放大缩小
        handleWheel(event) {
            event.preventDefault(); // 阻止默认事件，防止页面滚动
            const delta = event.deltaY * -1; // 获取滚轮滚动的方向
            this.scale += delta > 0 ? this.scaleStep : -this.scaleStep; // 根据滚动方向调整缩放比例
            // 限制缩放比例的范围，防止过大或过小
            this.scale = Math.min(Math.max(0.1, this.scale), 5);
        },
        // 平面图赋值
        getimage(image) {
            this.image = image
        },
        // 已标记展示标记点
        getMark(mark) {
            // console.log(mark);
            this.left = mark.slice(0, mark.indexOf(','))
            this.top = mark.slice(mark.indexOf(',') + 1)
            this.flag = true;
        },
        // 缩放图片
        // rollImg(e) {
        //     let transform = this.$refs.imgDiv.style.transform
        //     let zoom = transform.indexOf("scale") != -1 ? +transform.split("(")[1].split(")")[0] : 1
        //     zoom += e.wheelDelta / 1200
        //     if (zoom > 0.1 && zoom < 5) {
        //         this.$refs.imgDiv.style.transform = "scale(" + zoom + ")"
        //     }
        // },
        //绘制标记
        setPoint(e) {
            if (this.flag) return
            // console.log(e);
            e = e || window.event;
            //   let x = e.offsetX || e.layerX;
            //   let y = e.offsetY || e.layerY;
            //   let obj = {x: x + 'px',y: y + 'px',showModal:false}
            //   console.log(obj);
            this.left = e.offsetX - 10 || e.layerX - 10;
            this.top = e.offsetY - 17 || e.layerY - 17;
            this.flag = true;
        },

        // 点击绑定
        async submit() {
            if (!this.flag) return this.$modal.notifyWarning('请先标记点!');
            if (this.editInfo) {
                // 编辑
                const res = await reqUpdateMark({
                    id: this.editInfo.id,
                    mark: this.left + "," + this.top
                })
                // console.log(res);
                if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
                this.$modal.notifySuccess("标记成功!");
                this.closeDialog()
                this.$parent.getDataList()
                return;
            }
            // 新增
            this.dialogVisible = false;
            let mark = this.left + ',' + this.top;
            this.$emit('clickMark', mark)
        },
        // 点击关闭弹框
        closeDialog() {
            this.dialogVisible = false;
            this.left = 0;
            this.top = 0;
            this.flag = false;

            this.scale = 1 // 初始缩放比例为1
            this.scaleStep = 0.1 // 每次滚动缩放的步长
            this.x = 0// div的初始x坐标
            this.y = 0 // div的初始y坐标
            this.dragging = false // 是否正在拖动
            this.startX = 0 // 鼠标按下时的x坐标
            this.startY = 0 // 鼠标按下时的y坐标
        },
    },
};
</script>

<style lang="less" scoped>
.caritem {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    .caritem_div {
        width: 800px;
        height: 450px;
        position: relative;
    }
}

.div_box {
    margin: 0 auto;
    width: 800px;
    height: 450px;
    position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);

    .elImage {
        cursor: move;
        width: 100%;
        height: 100%;
        // position: absolute;
        // top: 50%;
        // left: 50%;
        // transform: translate(-50%,-50%);
    }

    .icon {
        position: absolute;
        border-radius: 50%;
        font-size: 20px;
        width: 34px;
        height: 34px;
        background-color: #7367F0;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 0 0 4px 2px #ccc;
    }
}

::v-deep .el-dialog {
    height: 80% !important;
    max-height: 80vh;
    width: 60% !important;
}
</style>